
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Stuttgart Monopoly!</title>
    <link href="style_spielfeld.css" type="text/css" rel="stylesheet">
    
    </head>
        
                                          
                                         
    <body>
    <div id="würfel">
    <script type='text/javascript' src="http://code.jquery.com/jquery-1.5.1.min.js"> <!--
var i;
var face = new Array();
for(i=0;i<6;i++) {
   face[i] = new Image();
   face[i].src="wuerfel" + (i+1) + ".jpg";
}
var ii;
var face = new Array();
for(ii=0;ii<6;ii++) {
   face[ii] = new Image();
   face[ii].src="wuerfel1" + (ii+1) + ".jpg";
}

        
        
function throwdice(){
   var randomdice=Math.ceil(Math.random()*6);
   document.images["wuerfel"].src=eval("face["+randomdice+"].src")
   var randomdice=Math.ceil(Math.random()*6);
document.images["wuerfel1"].src=eval("face["+randomdice+"].src")
}
        

//-->
</script>
        
<div id="wuerfel">
<img src="wuerfel1.jpg" name="wuerfel" />
<img src="wuerfel1.jpg" name="wuerfel1" />
<form>
<input type="button" value="Würfeln!" onclick="throwdice()" />
</form> 
</div>       
        
<br />
        </div>
        
<div>
    <img class="displayed" src="MonopolySpielfeld.jpg">
</div>
        
    <div id="top">
     </div>  

    <button id="go">&raquo;Ziehen</button>
        
<div id="block">
    <img class="rot" src="Spielfigur_Rot.png">
    </div>
        
<script>
 
    
 
 $(function(){
     
    counter = 0;
/*Feld               0    1    2   3    4    5    6    7    8    9    10   11   12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33   34   35   36   37   38   39   40 */  
     var topField=[560, 560, 560, 560, 560, 560, 560, 560, 560, 560, 560, 560, 510, 460, 410, 355, 305, 255, 200, 150,  95,  40,  40,  40,  40,  40,  40,  40,  40,  40,  40,  40,  95, 150, 200, 255, 305, 355, 410, 460, 510];
    var leftField=[910, 910, 855, 800, 750, 700, 650, 595, 540, 490, 440, 380, 380, 380, 380, 380, 380, 380, 380, 380, 380, 380, 440, 490, 540, 595, 650, 700, 750, 800, 855, 910, 910, 910, 910, 910, 910, 910, 910, 910, 910];
     console.log(leftField[counter]);
     console.log(topField[counter]);
     
     
 $( "#go" ).click(function() {

var ftop = topField[counter];
var fleft = leftField[counter];
 
   
$('#block').animate({
        left: fleft,
        top: ftop
      }, 500, function() {
        // Animation complete.
      });
  

     
counter ++;
});
});     

</script>
       
 
    </body>


</html>